<template>
  <div class="app-container">


           <!--查询表单-->
     <div class="search-div">
        <el-form label-width="70px" size="small">
        <el-row>
           <el-col :span="8">
              <el-form-item label="关键字">
              <el-input style="width: 100%" v-model="searchObj.keyword" placeholder="学员名称/教师名称" clearable></el-input>
              </el-form-item>
           </el-col>

           <el-col :span="6">
           <el-form-item label="学员">
             <template>
               <el-select
                 v-model="searchObj.userId"
                 placeholder="请选择"
                 style="margin-right: 10px; width: 80%"
               >
                 <el-option
                   v-for="item in studentList"
                   :key="item.id"
                   :label="item.username"
                   :value="item.id"
                 >
                 </el-option>
               </el-select>
             </template>
           </el-form-item>
         </el-col>

        </el-row>
        <el-row style="display:flex">
           <el-button type="primary" icon="el-icon-search" size="mini"  @click="fetchData()">搜索</el-button>
           <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
        </el-row>
        </el-form>
     </div>

     <!-- 工具条 -->
     <div class="tools-div">
        <!-- <el-button type="success" icon="el-icon-plus" size="mini" @click="add" :disabled="$hasBP('bnt.sysSignRecord.add')  === false">添 加</el-button> -->
        <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>
      
        <el-button class="btn-add" size="mini" @click="batchRemove()" >批量删除</el-button>
     </div>

   

  
   <div class="app-container">
     <!-- 表格 -->
        <el-table
              v-loading="listLoading"
              :data="list"
              stripe
              border
              @selection-change="handleSelectionChange"
              style="width: 100%;margin-top: 10px;">

              <el-table-column type="selection"/>

              <el-table-column
              label="序号"
              width="70"
              align="center">
              <template slot-scope="scope">
                 {{ (page - 1) * limit + scope.$index + 1 }}
              </template>
              </el-table-column>

              <el-table-column prop="param.courseId" label="课程编号"/>
              <el-table-column prop="param.teacher_name" label="教师" />
              <el-table-column prop="param.name" label="学员" />
              <el-table-column prop="signing" label="签到状态" >
                  <template slot-scope="scope">
                    <el-tag type="primary" v-if="scope.row.signing===1">已签</el-tag>
                    <el-tag type="warning" v-if="scope.row.signing===0">未签</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间"/>
              <el-table-column prop="updateTime" label="更新时间"/>
              <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                 <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改"/>
                 <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)" title="删除"/>
                 <!-- <el-button type="warning" icon="el-icon-baseball" size="mini" @click="switchStatus(scope.row)" title="签到"/> -->
              </template>
              </el-table-column>
           </el-table>
      </div>

     <!-- 分页组件 -->
     <el-pagination
   :current-page="page"
   :total="total"
   :page-size="limit"
   style="padding: 30px 0; text-align: center;"
   layout="total, prev, pager, next, jumper"
   @current-change="fetchData"
 />

<!-- 添加 /修改  根据是否有id,进行判断。-->
 <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%" >
     <el-form ref="dataForm" :model="sysSignRecord" label-width="150px" size="small" style="padding-right: 40px;">
       <!-- <el-form-item label="课程名称">
           <el-select v-model="sysSignRecord.courseId"  placeholder="课程名称">
             <el-option
               v-for="item in courseList"
               :key="item.id"
               :label="item.name"
               :value="item.id"
             ></el-option>
           </el-select>
         </el-form-item> -->
         <el-form-item label="学员名称">
         <el-select v-model="sysSignRecord.userId"  placeholder="学员名称">
             <el-option
               v-for="item in studentList"
               :key="item.id"
               :label="item.username"
               :value="item.id"
             ></el-option>
           </el-select>
       </el-form-item>
        
     <el-form-item label="创建时间" v-if="sysSignRecord.id">
         <el-input v-model="sysSignRecord.createTime" disabled/>
     </el-form-item>
     <el-form-item label="修改时间" v-if="sysSignRecord.id">
         <el-input v-model="sysSignRecord.updateTime" disabled/>
     </el-form-item>

     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
       <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
     </span>
</el-dialog>


  </div>
</template>


<script>
// 引入 role.js  
import api from '@/api/sysSignRecord/signRecord.js'

import courseApi from '@/api/sysCourse/course.js'
import userApi from '@/api/user/user.js'


export default {
  data() {
     return {
        // 定义table的数据源、变量
        list:[],
        // 控制菊花展示true 或者 隐藏 fasle
        listLoading:true,
        // 当前页码
        page:1,
        // 每页条数
        limit:5,
        // 总记录条数
        total:0,
        // 搜索条件
        searchObj:{},
       // 控制弹窗的展示或隐藏 
         dialogVisible:false,
       // 传递的数据对象
         sysSignRecord:{},
       // 选中的数据
         selectValueData:[],
        //  课程列表
        courseList:[],
        //  studentlist
        studentList:[],
        teacherList:[],//老师
     }
  },
  created() {
     this.fetchData();
     this.fetchCourseList();
     this.fetchStudentList();
     this.fetchTeacherList();
  },
  methods:{

       // 是否撤回
   switchStatus(row) {
     // 如果 可用  设置为 不可用  如果不可用  设置为 可用
     row.status = row.status === 1 ? 0 : 1;
     api.updateStatus(row.id, row.status).then((response) => {
       //a.给出提示
       this.$message.success(response.message || "撤回成功");
       //b.再次刷新列表
       this.fetchData();
     });
   },

  // 查询所有的老师
  fetchTeacherList() {
     userApi.findTeacher().then((res) => {
       this.teacherList = res.data;
     });
   },

  // 查询所有的Student
  fetchStudentList() {
     userApi.findStudent().then((res) => {
       this.studentList = res.data;
     });
   },

  // 查询全部课程
   fetchCourseList() {
     courseApi.findAll().then((res) => {
       this.courseList = res.data;
     });
   },

   // 5、批量删除
   batchRemove(){
     // 判断是否有选中select
     if(this.selectValueData.length==0)
     {
        this.$message.warning('请选择要删除的记录！')
       return;
     }
       this.$confirm("此操作将永久删除, 是否继续?", "提示", {
       confirmButtonText: "确定",
       cancelButtonText: "取消",
       type: "warning",
     }).then(() => {
       var ids=[];
       for(var i=0;i<this.selectValueData.length;i++)
       {
         var obj= this.selectValueData[i];
         // 获取id值
         var id = obj.id;
         // 将id放进到数组中
        ids.push(id);
       }
       api.batchremoveId(ids)
         .then((response) => {
         // 提示
         this.$message({
           type: "success",
           message: "删除成功!",
         });
         // 刷新页面
         this.fetchData();
       });
     });
   },
   handleSelectionChange(selectValue){
   //  console.log(selectValue);
    this.selectValueData= selectValue;
   },
  

     // 4、根据单个id,删除
      // 删除操作
   removeDataById(id) {
     this.$confirm("此操作将永久删除, 是否继续?", "提示", {
       confirmButtonText: "确定",
       cancelButtonText: "取消",
       type: "warning",
     }).then(() => {
        // a.发送请求
       api.removeId(id)
         .then((res) => {
         // 提示
         this.$message({
           type: "success",
           message: "删除成功!",
         });
         // b.刷新页面
         this.fetchData();
       });
     });
   },
   
     //3、添加  +  修改

     // 根据id去回显角色信息
     edit(id){
       // 先查看是否有收到id
       // alert(id);

       // a.发送请求
       api.getSignRecordById(id).then(res=>{
         // 查看显示数据
         // console.log(res);
         this.sysSignRecord=res.data;
          // c、打开弹框true
          this.dialogVisible=true;
       })
     },

     updateSignRecord(){
           // a、发送请求
           api.updateSignRecord(this.sysSignRecord).then(res=>{
             // console.log(res);
           // b、给出修改提示
           this.$message({
             type:'success',
             message:"修改成功！",
           })
           // c、关闭弹框
           this.dialogVisible=false;
           
           // d、再次刷新列表
           this.fetchData();
         })
       },

       //添加或者修改 具体功能
       saveOrUpdate(){
         if(this.sysSignRecord.id!=null){
           this.updateSignRecord();
         }else{
           this.addSignRecord();
         }
       },
       //实现添加功能
       addSignRecord(){
         api.saveSignRecord(this.sysSignRecord)
         .then(Response=>{
           this.$message({
             type:'success',
             message:"添加成功！",
           });
           // 一样的效果
           // this.$message.success('添加成功！');
           // 关闭弹框
           this.dialogVisible=false;
           // 刷新数据
           this.fetchData();
         })
       },
         //打开弹框
       add(){
         // 当打开弹框之前，清空文本框所有数据  
           this.sysSignRecord={};
           this.dialogVisible=true
         },

     // 2、重置
        resetData(){
           // 清空搜索条件
           this.searchObj={};
           // 再次刷新列表
           this.fetchData();
        },
     // 1、查找
        fetchData(page=1){
         this.page = page;
           // console.log(this.limit);
           console.log(this.page);
           api.getSignRecordList(this.page,this.limit,this.searchObj).then(res=>{
              // 输出结果查看 
              // console.log(res);
              // 隐藏菊花展示
              this.listLoading=false;
              this.list=res.data.records;
              this.total=res.data.total;
           })
        }
  },
  
}
</script>

<style>

</style>